import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

interface BucketItem {
  id: number
  text: string
  completed: boolean
  category: string
  completedDate?: string
  completedNote?: string
}

interface CompletionModalProps {
  isOpen: boolean
  item: BucketItem | null
  onClose: () => void
  onComplete: (note: string) => void
}

export function CompletionModal({ isOpen, item, onClose, onComplete }: CompletionModalProps) {
  const [completionNote, setCompletionNote] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!completionNote.trim()) {
      alert('请写下完成这个约定的感受或记录')
      return
    }
    onComplete(completionNote)
    setCompletionNote('')
  }

  return (
    <AnimatePresence>
      {isOpen && item && (
        <motion.div
          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
        >
          <motion.div
            className="bg-white rounded-3xl p-8 max-w-lg w-full"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.8, opacity: 0 }}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="text-center mb-6">
              <div className="text-6xl mb-4">🎉</div>
              <h2 className="text-2xl font-bold text-gray-800 mb-2">
                恭喜完成约定！
              </h2>
              <p className="text-gray-600">
                "{item.text}"
              </p>
            </div>

            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  记录这个美好时刻 ✨
                </label>
                <textarea
                  value={completionNote}
                  onChange={(e) => setCompletionNote(e.target.value)}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-400 resize-none"
                  rows={4}
                  placeholder="写下完成这个约定时的心情、过程或者难忘的细节..."
                  required
                />
              </div>

              <div className="flex space-x-4">
                <button
                  type="button"
                  onClick={onClose}
                  className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors"
                >
                  取消
                </button>
                <button
                  type="submit"
                  className="flex-1 px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl hover:from-green-600 hover:to-emerald-600 transition-all"
                >
                  标记完成 🎊
                </button>
              </div>
            </form>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
